<template>
  <div v-if="type == 'primary'" class="flex-v-c pos-r">
    <div v-if="areaShow" class="primary-topsearch-left" @click="showAreaSelect">
      <p class="toe tac pl-20 pr-30 right-icon pos-r fs-26">{{ locationCity }}</p>
    </div>
    <van-field
      v-model="searchValue"
      class="flex-1"
      :class="inputStyle"
      clearable
      :placeholder="placeholder"
      left-icon="search"
      @click-left-icon="search"
      @keyup.enter="search"
    />
    <div class="pos-a right-50 fs-26" @click="search">搜索</div>
  </div>
</template>

<script>
export default {
  name: 'TopSearch',
  props: {
    // 头部搜索类型
    type: {
      type: String,
      required: true,
      default: 'primary'
    },
    areaShow: {
      type: Boolean,
      required: false,
      default: true
    },
    inputStyle: {
      type: String,
      required: false,
      default: ''
    },
    placeholder: {
      type: String,
      required: false,
      default: '请输入您想要搜索的内容'
    },
    val: {
      type: String,
      required: false,
      default: ''
    },
    locationCity: {
      type: String,
      required: false,
      default: ''
    }
  },
  data() {
    return {
      msg: '123',
      searchValue: ''
    }
  },
  mounted() {
    if (this.val) {
      this.searchValue = this.val
    }
  },
  methods: {
    search() {
      // console.log(this.searchValue)
      this.$emit('search', this.searchValue)
    },
    showAreaSelect() {
      this.$emit('showAreaSelect', true)
    }
  }
}
</script>

<style lang="scss" scoped>
.van-cell {
  width: auto;
  max-width: 100%;
  background-color: #f4f4f4;
  border-radius: 4px;
  margin: 8px 12px 8px 5px;
  padding: 6px 12px;
}
/deep/.van-field__clear {
  margin-right: 20px;
}
.right-icon:after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-bottom: 1px solid $color9;
  border-right: 1px solid $color9;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg); /* IE 9 */
  -moz-transform: rotate(45deg); /* Firefox */
  -webkit-transform: rotate(45deg); /* Safari Opera and Chrome */
  right: 5px;
  bottom: 16px;
}
.inputStyle-1{
  margin: 16px 24px;
  border-radius: 36px;
}
.inputStyle-2{
  margin: 16px 24px;
  border-radius: 36px;
  background: transparent;
  border: 1px solid $colorBorder;
}
.flex-1{
  background: #fff;
  border-radius: 41px;
  border: 1px solid #24c373;
}
</style>
